<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-card style="width: 80%;margin-top: 30px">
        <div style="margin-bottom: 10px;margin-left:5px;font-size: 20px;font-weight: bold;">优惠券设置</div>
        <el-button type="primary" style="margin-left: 5px;margin-top: 5px" @click="dialogCoupon = true">新增优惠券
        </el-button>
        <div style="margin-bottom: 10px">
        </div>
        <el-table ref="userTable" :data="tableData" stripe
                  :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
          <el-table-column prop="id" label="序号" align="center"></el-table-column>
          <el-table-column prop="name" label="优惠券名称"></el-table-column>
          <el-table-column prop="discount" label="优惠券金额"></el-table-column>
          <el-table-column prop="point" label="所需积分"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column label="操作" width="150%" align="center">
            <template v-slot="scope">
              <el-button size="mini" type="danger" plain @click="Eidt(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" plain @click="Del(scope.row.id)">废弃</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-dialog title="提示" :visible.sync="dialogCoupon" width="30%">
      <el-form ref="couponRef" :model="couponFrom" :rules="rules" label-width="100px" style="padding-right: 20px">
        <div style="text-align: center; margin-bottom: 20px">
          <el-form-item label="优惠券名称 " prop="name">
            <el-input v-model="couponFrom.name" placeholder="优惠券名称" type="text"></el-input>
          </el-form-item>
          <el-form-item label="优惠券金额" prop="discount">
            <el-input v-model="couponFrom.discount" placeholder="优惠券金额" type="text"></el-input>
          </el-form-item>
          <el-form-item label="所需积分" prop="point">
            <el-input v-model="couponFrom.point" placeholder="所需积分" type="text"></el-input>
          </el-form-item>
        </div>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="save" @keyup.enter="save">提交</el-button>
          <el-button @click="cancel()">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogEdi" width="30%">
      <el-form ref="couponRef" :model="rowFrom" :rules="rules" label-width="100px" style="padding-right: 20px">
        <div style="text-align: center; margin-bottom: 20px">
          <el-form-item label="优惠券名称 " prop="name">
            <el-input v-model="rowFrom.name" placeholder="优惠券名称" type="text"></el-input>
          </el-form-item>
          <el-form-item label="优惠券金额" prop="discount">
            <el-input v-model="rowFrom.discount" placeholder="优惠券金额" type="text"></el-input>
          </el-form-item>
          <el-form-item label="所需积分" prop="point">
            <el-input v-model="rowFrom.point" placeholder="所需积分" type="text"></el-input>
          </el-form-item>
        </div>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="EditT()" @keyup.enter="EditT">提交</el-button>
          <el-button @click="dialogEdi = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogDel" width="30%">
      <el-form label-width="100px" style="padding-right: 20px">
        <div style="text-align: center; margin-bottom: 20px">确认废弃吗？</div>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="Delete">确认</el-button>
          <el-button @click="dialogDel = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "coupon",
  data() {
    return {
      dialogCoupon: false,
      dialogEdi: false,
      dialogDel: false,
      couponFrom: {
        name: '',
        discount: '',
        point: '',
      },
      rowFrom: {},
      delId: "",
      rules: {
        name: [
          {required: true, message: '请输入优惠券名称', trigger: 'blur'}
        ],
        discount: [
          {required: true, message: '请输入优惠券金额', trigger: 'blur'},
          {pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的价格', trigger: 'blur'}
        ],
        point: [
          {required: true, message: '请输入所需积分', trigger: 'blur'},
          {pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的积分', trigger: 'blur'}
        ],
      },
      tableData: [],
      originalData: [],
      user: JSON.parse(localStorage.getItem("user")),
    }
  },
  methods: {
    save() {
      this.$refs['couponRef'].validate((valid) => {
        if (valid) {
          this.$request.post('/coupon_template_add/', {
                "name": this.couponFrom.name,
                "discount": this.couponFrom.discount,
                "point_amount": this.couponFrom.point,
              }
          ).then(res => {
            if (res.code === '200') {
              this.$message.success(res.msg)
              location.reload()
              this.load()
              this.dialogCoupon = false
            } else if (res.code === '501') {
              this.$message.warning("优惠券已存在")
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    cancel() {
      this.dialogCoupon = false
    },
    Eidt(row) {
      this.rowFrom = JSON.parse(JSON.stringify(row))
      this.dialogEdi = true //打开弹窗
    },
    EditT() {
      this.$refs['couponRef'].validate((valid) => {
        if (valid) {
          this.$request.post('/coupon_template_edit/', {
                "id": this.rowFrom.id,
                "name": this.rowFrom.name,
                "discount": this.rowFrom.discount,
                "point_amount": this.rowFrom.point,
              }
          ).then(res => {
            if (res.code === '200') {
              this.$message.success(res.msg)
              this.dialogCoupon = false
              location.reload()
            }
          })
        }
      })
    },
    Del(id) {
      this.delId = id
      this.dialogDel = true //打开弹窗
    },
    Delete() {
      console.log(this.delId)
      this.$request.get('/coupon_template_deprecate/' + this.delId + "/").then(res => {
        if (res.code === '200') {
          this.$message.success(res.msg)
          this.dialogDel = false
          this.load()
          location.reload()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    load() {
      this.$request.get('/coupon_template_list/').then(res => {
        if (res.code === '200') {
          this.originalData = res.data.coupon_list
          this.tableData = this.originalData.filter(row => row.status !== '已废弃');
          console.log(this.originalData)
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
  ,
  created() {
    this.load()
  }
}
</script>
<style scoped>

</style>